<template>
	<view class="contents" :style="'height:'+screenHeight+'px'">


		<view class="headers">
			<u-search @clickIcon="searchs" @search="searchs" placeholder="科室/医生名称" v-model="keyword"
				:showAction="false">
			</u-search>
		</view>

		<view class="listconent">
			<view class="mains" v-for="(item, index) in processedDepartmen" :key="index">
			    <view :class="index == indexshow ? 'left width color1' : 'left gary'" @click="isShow(index)">
			      <view class="ftypespan" style="display: flex;flex-direction: column;justify-content: center;">
			      	<span class="">{{ item.name }}</span>
			      	<span class="" v-if="item.bracketContent">({{ item.bracketContent }}</span>
			      </view>
			    </view>
			  </view>
		</view>
		<view class="right">
			<view class="rightchird" v-for="(citem,indexs) in DepartList" :key="indexs">
				<view @click="Scheduling(citem.DepartmentId)" style="padding: 0 50rpx;">
					<span class="">{{citem.DptName}}</span>
					<span style="float: right;"><u-icon size="22" name="arrow-right"></u-icon></span>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				scrollTop: 0,
				
				screenHeight: getApp().globalData.screenHeight-44,
				showtext: false,
				indexshow: 0,
				index: 0,
				Departmen: [],
				keyword: '',
				DepartList: []
			}
		},
		
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin', 'getUserInfo']),
			 processedDepartmen() {
			       return this.Departmen.map(item => {
			         const [name, bracketContent] = item.FullName.split('（');
					 console.log("name",name)
					 console.log("bracketContent",bracketContent)
			         return {
			           ...item,
			           name: name.trim(),
			           bracketContent: bracketContent ? bracketContent.trim() : null,
			         };
			       });
			     },
		},
		onShow() {
			if (this.hasLogin) {
				uni.showLoading({
					title: '加载中'
				})
				this.$store.dispatch('getUserInfo');
				this.addDepartmen()
			} else {
				uni.hideLoading();
				uni.showModal({
					title: '提示',
					content: '登录后才可以操作',
					confirmText: '去登录',
					showCancel: false,
					success: function(res) {
						uni.reLaunch({
							url: '/pages/auth/login'
						})
					}
				});
				return;
			}

		},
		methods: {
			Scheduling(DepartmentId) {
				console.log(DepartmentId)
				uni.navigateTo({
					url: `/pages/register/Scheduling/Scheduling?DepartmentId=${DepartmentId}`,
					fail(error) {
						console.log(error)
					}
				})
			},
			isShow(index) {
				this.indexshow = index
				this.DepartList = this.Departmen[index].DepartList
				// console.log(index)
				// console.log(this.DepartList)
			},
			addDepartmen() {
				this.$request('HisDpt', 'HisPBDPT',{
					page:'',
					rows:'',
					CompanyId:''
				}).then(res => {
					if (res.code == 1) {
						console.log("获取his排班科室",res)
						this.Departmen = res.data
						this.DepartList = this.Departmen[0].DepartList
						this.indexshow=0
						uni.hideLoading();
					} else {
						uni.hideLoading();
						console.log("获取失败")
					}

				})

			},
			searchs() {
				let keywords = this.keyword
				uni.navigateTo({
					url: `/pages/searchs/index?keyword=${keywords}`,
					fail(error) {
						console.log(error)
					}
				})
			}
		}
	}
</script>

<style>
	@import './selectDepartment.css'
</style>
